<template>
  <section class="container">
    <el-row type="flex" justify="space-between">
      <!-- 顶部过滤列表 -->
      <div class="flights-content">
        <!-- 过滤条件 -->
        <flights-filter v-if="flightsInfo.options" :data="flightsInfo" @handleSelect="setFilteredList" />
        <!-- 分页器 -->
        <el-pagination
          v-if="filteredList"
          :current-page="pageIndex"
          :page-sizes="[5,10,20,50,100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="filteredList.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
        <!-- 航班头部布局 -->
        <flights-list-head />
        <!-- 航班信息 -->
        <flights-item
          v-for="flight of dataList"
          :key="flight.id"
          :flight="flight"
        />
        <div v-if="dataList.length === 0" class="empty">
          <i class="el-icon-warning" /> 暂无航班信息
        </div>
      </div>

      <!-- 侧边栏 -->
      <div class="aside">
        <flights-aside />
      </div>
    </el-row>
  </section>
</template>

<script>
export default {
  name: 'Flights',
  data () {
    return {
      flightsInfo: {},
      filteredList: [],
      pageSize: 10,
      pageIndex: 1
    }
  },
  computed: {
    dataList () {
      if (!this.filteredList) {
        return []
      }
      const beginIndex = (this.pageIndex - 1) * this.pageSize
      const endIndex = beginIndex + this.pageSize
      return this.filteredList.slice(beginIndex, endIndex)
    }
  },
  watch: {
    $route () {
      this.getFlights()
    }
  },
  created () {
    this.getFlights()
  },
  methods: {
    getFlights () {
      this.$axios.get('/airs', {
        params: this.$route.query
      }).then((res) => {
        this.flightsInfo = res.data
        this.filteredList = res.data.flights
      })
    },
    handleCurrentChange (newPage) {
      this.pageIndex = newPage
    },
    handleSizeChange (newSize) {
      this.pageSize = newSize
    },
    // 设置过滤后的数据
    setFilteredList (list) {
      // console.log(list)
      this.pageIndex = 1 // 把当前页数重新设置为1
      this.filteredList = list
    }
  }
}
</script>

<style scoped lang="less">
.container {
        width: 1000px;
        margin: 20px auto;
    }

    .flights-content {
        width: 745px;
        font-size: 14px;
        .empty{
          text-align: center;
          color: #666;
          }
    }

    .aside {
        width: 240px;
    }
</style>
